<template>
  <div>
    <HForm
      ref="formRef"
      v-bind="formConfig"
      v-model="formData"
      :show-action="showAction"
      :confirm-loading="confirmLoading"
      @click:confirm="handleConfirm"
    ></HForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

import { formConfig } from './config/form.config';

import { fetchCreateTheme } from '@/api/theme';
import HForm from '@/components/Base/Form';

export default defineComponent({
  components: { HForm },
  props: {
    modelValue: {
      type: Object,
      default: () => {},
    },
    showAction: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const formData = ref({ ...props.modelValue });
    const confirmLoading = ref(false);
    const formRef = ref<any>(null);

    const handleConfirm = async (v) => {
      try {
        confirmLoading.value = true;
        const { message } = await fetchCreateTheme(v);
        window.$message.success(message);
      } catch (error) {
        console.log(error);
      } finally {
        confirmLoading.value = false;
      }
    };

    const validateForm = async () => {
      const res = await formRef.value.handleValidate();
      return res;
    };

    return {
      formRef,
      formConfig,
      formData,
      confirmLoading,
      handleConfirm,
      validateForm,
    };
  },
});
</script>

<style lang="scss" scoped></style>
